<template>
  <q-page class="flex flex-center">
    <div class="ocr-id-card row">
      <div class="col box-content column">
        <div class="col flex flex-center q-pa-md"><img :src="sourceImg" /></div>
        <q-separator />
        <div class="col flex flex-center q-pa-md "><img :src="distImg" /></div>
      </div>
      <div class="col column bg-grey-1">
        <q-file ref="fileField" color="purple-12" v-model="uploadField" label="选择身份证" :max-files="1" @input="fileChange">
          <template v-slot:prepend>
            <q-icon name="attach_file" />
          </template>
        </q-file>
        <q-card class="q-ma-md">
          <q-list bordered class="card-info">
            <q-item>
              <q-item-section>姓名：</q-item-section>
              <q-item-section>
                {{ idCard.name }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>性别：</q-item-section>
              <q-item-section>
                {{ idCard.sex }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>民族：</q-item-section>
              <q-item-section>
                {{ idCard.nation }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>出生：</q-item-section>
              <q-item-section>
                {{ idCard.born }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>住址：</q-item-section>
              <q-item-section>
                {{ idCard.address }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>公民身份证号码：</q-item-section>
              <q-item-section>
                {{ idCard.id }}
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>

      </div>
    </div>
  </q-page>
</template>

<script>
import { binaryOcr } from 'boot/api/index';
import { fileToBase64 } from 'components/utils/FileCompress';

export default {
  props: {},
  data() {
    return {
      uploadField: null,
      sourceImg: '',
      distImg: '',
      idCard: {
        id: '',
        name: '',
        sex: '',
        nation: '',
        address: '',
        born: '',
      },
      idCardEmpty: {
        id: '',
        name: '',
        sex: '',
        nation: '',
        address: '',
        born: '',
      },
    };
  },
  computed: {},
  methods: {
    fileChange() {
      fileToBase64(this.uploadField, (base64) => {
        this.sourceImg = base64;
      });

      const formData = new FormData();
      formData.append('file', this.uploadField);
      formData.append('compress', 960);
      binaryOcr('/chinese-ocr/', formData).then(({ code, data }) => {
        this.idCard = { ...this.idCardEmpty };
        if (code === 200) {
          this.distImg = data.img_detected;
          const rawOut = data.raw_out;
          let all = '';
          for (let i = 0; i < rawOut.length; i += 1) {
            const field = rawOut[i];
            const text = field[1].substring(2);
            all += text;
          }
          const idIdx = all.indexOf('公民身份号码');
          const nameIdx = all.indexOf('姓名');
          const sexIdx = all.indexOf('性别');
          const nationIdx = all.indexOf('民族');
          const bornIdx = all.indexOf('出生');
          const addressIdx = all.indexOf('住址');
          if (idIdx > -1 && nameIdx > -1 && sexIdx > -1 && nationIdx > -1 && addressIdx > -1 && bornIdx > -1) {
            this.idCard.name = all.substring(nameIdx + 2, sexIdx);
            this.idCard.sex = all.substring(sexIdx + 2, sexIdx + 3);
            this.idCard.nation = all.substring(nationIdx + 2, bornIdx);
            this.idCard.born = all.substring(bornIdx + 2, addressIdx);
            this.idCard.address = all.substring(addressIdx + 2, idIdx);
            this.idCard.id = all.substring(idIdx + 6, all.length - 1);
          } else {
            this.$q.notify({
              textColor: 'red',
              timeout: 24 * 3600 * 1000,
              message: `解析失败，服务器返回内容：[${all}]`,
              position: 'top',
            });
          }
        }
      });
    },
  },
  created() { },
  mounted() {
  },
  watch: {
  },
};
</script>
<style lang="stylus">
.ocr-id-card
  width 800px
  height 600px
  .box-content
    overflow: hidden;
    background-color: #ececec;
    img
      width 100%
      height 100%
  .card-info
    .q-item
      div:first-child
        max-width 150px !important
        padding-left 20px

</style>
